<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html >
<head>
	<meta name="decorator" content="sysDefault" content="text/html; charset=utf-8"/>
	<!-- 
	<style type="text/css">
	div.diagram{
		margin: 20px;
		position: relative;
		background: url('${contextPath}/bpm/def/definition/bpmImage?bpmnDefId=${bpmDef.bpmnDefId }') no-repeat;
		width: ${diagramDiv['width']+20}px;
		height:${diagramDiv['height']+20}px;
	}
	</style>
	 -->
	<script type="text/javascript">
		$(document).ready(function() {
			var _form = $("#definitionForm");
			//注册事件
			$("#btn_save").click(function(){
				var _defId = $("#defId").val(),_submitType = $("#submitType");
				if(!_submitType.size()){
					_submitType = $("<input type='hidden' id='submitType'>").appendTo(_form);
				}
				_submitType.attr("name","isSave").val(_defId.length ? "true" : "false");
				_form.submit();
			});
			
			$("#btn_deploy").click(function(){
				var _submitType = $("#submitType");
				if(!_submitType.size()){
					_submitType = $("<input type='hidden' id='submitType'>").appendTo(_form);
				}
				_submitType.attr("name","isDeploy").val("true");
				_form.submit();
			});
			
		});
	</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
				  <div class="panel-heading">
				    <h3 class="panel-title">查看流程定义
						<a class="btn btn-default btn-sm pull-right" role="button" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
				    </h3>
				  </div>
				  <div class="panel-body">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="#home" data-toggle="tab">流程定义</a></li>
							<li><a href="#vars" data-toggle="tab">流程变量</a></li>
							<li><a href="#diagram" data-toggle="tab">流程图</a></li>
						</ul>
						<div class="tab-content" style="height: 60%; width: 100%">
							<div class="tab-pane active" id="home">
								<table class="table table-bordered">
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>流程名称:</strong></td>
								  		<td>${bpmDef.name }</td>
								  	</tr>
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>流程业务主键:</strong></td>
								  		<td>${bpmDef.defKey }</td>
								  	</tr>
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>测试状态:</strong></td>
								  		<td>${bpmDef.testStatus }</td>
								  	</tr>
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>流程描述:</strong></td>
								  		<td>${bpmDef.desc }</td>
								  	</tr>
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>变更理由:</strong></td>
								  		<td>${bpmDef.reason }</td>
								  	</tr>
									<tr>
								  		<td class="text-right" style="width: 20%"><strong>流程定义XML:</strong></td>
								  		<td>
								  			<textarea rows="20" cols="40" readonly="readonly"  style="width: 95%;height: 200px;border: none;background: white;padding: 0;margin: 0;">${bpmDef.bpmDefData.defXml }</textarea>
								  		</td>
								  	</tr>
								</table>
							</div>
							<div class="tab-pane" id="vars">
								<span class="help-block">&nbsp;</span>
								<div class="container-fluid">
									<div class="col-sm-12">  
										<div> 
											<table class="table table-bordered">
												<thead>
													<tr>
														<th>键(Key)</th>
														<th>值(Value)</th>
													</tr>
												</thead>
												<tbody id="varsBody">
													<c:if test="${vars!=null }">
														<c:forEach items="${vars}" var="entry">
															<tr>
																<td>
																	<div style="width:100%;" class="col-sm-2">
																		${entry.key }
																	</div>
																</td>
																<td>
																	<div style="width:100%;" class="col-sm-2">
																		${entry.value }
																	</div>
																</td>
															</tr>
														</c:forEach>
													</c:if>
												</tbody>
											</table>
										</div>
									</div> 
								</div>
							</div>
							<div class="tab-pane" id="diagram" style="overflow-x:auto;">
								<div style="margin-top:20px;position:relative;background:url('${contextPath}/bpm/def/definition/bpmImage?bpmnDefId=${bpmDef.bpmnDefId}') no-repeat;width:${bpmDefLayout.width}px;height:${bpmDefLayout.height}px;">
									<c:forEach var="layout" items="${bpmDefLayout.listLayout}">
										<div class="flowNode" id="${layout.nodeId}" style="position:absolute;left:${layout.x}px;top:${layout.y}px;width:${layout.width}px;height:${layout.height}px;" name="${layout.name}" nodetype="${layout.nodeType}"></div>
									</c:forEach> 
								</div>
							</div>
						</div>
				  </div>
				</div>			
			</div>
		</div>
	</div>
</body>
</html>